<template>
  {{ searchForm }}
  <NvCrud v-model:search-form="searchForm" :option :data @search="handleSearch">
    <template #age_search>
      <div style="display: flex; gap: 5px">
        <NInputNumber v-model:value="searchForm.ageStart" />
        <NInputNumber v-model:value="searchForm.ageEnd" />
      </div>
    </template>
  </NvCrud>
</template>

<script setup lang="ts">
import type { NvCrudOption } from 'nv-crud'
import { NInputNumber } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { ref } from 'vue'

const searchForm = ref<{ name?: string, ageStart?: number, ageEnd?: number }>({})
function handleSearch(done: () => void) {
  setTimeout(done, 1000)
}

const data = [{ name: '张三', sex: '男', age: 18 }]

const option: NvCrudOption = {
  rowActions: false,
  actionbar: false,
  toolbar: false,
  fields: {
    name: {
      title: '姓名',
      search: true,
    },
    sex: {
      title: '性别',
    },
    age: {
      title: '年龄',
      search: true,
    },
  },
}
</script>
